<template>
    <div class="order">
        <header class="head">
            <ul>
                <li><a-button :type="state.active == 'all' ? 'primary' : 'default'" @click="() => selectOrder('all')">所有订单</a-button></li>
                <li><a-button :type="state.active == 0 ? 'primary' : 'default'" @click="() => selectOrder(0)">新订单</a-button></li>
                <li><a-button :type="state.active == 1 ? 'primary' : 'default'" @click="() => selectOrder(1)">完结订单</a-button></li>
                <li><a-button :type="state.active == 2 ? 'primary' : 'default'" @click="() => selectOrder(2)">取消订单</a-button></li>
            </ul>
        </header>
        <div class="table">
             <a-table :columns="state.columns" :data-source="state.data" bordered>
                <template #name="{ text }">
                <a>{{ text }}</a>
                </template>
                <template #operation="{ record }">
                    <a class="operation finish" @click="() => updateStatus(record, 1)">完成</a>
                    <a class="operation cancel" @click="() => updateStatus(record, 2)">取消</a>
                </template>
            </a-table>
        </div>
    </div>
</template>

<script>
import { onMounted, reactive } from 'vue'
import { getInstance } from '../utils/request'
import { message } from 'ant-design-vue'
import { useStore } from 'vuex'
export default {
    name: "allOrder",
    setup(){
        const store = useStore()
        const state = reactive({
            active: "all",
            columns:  [
                {
                    title: '住户',
                    dataIndex: 'name'
                },
                {
                    title: '电话号码',
                    dataIndex: 'phone',
                },
                {
                    title: '身份证号',
                    dataIndex: 'cardId'
                },
                {
                    title: '入住时间',
                    dataIndex: 'startTime',
                    customRender: ({text}) => {
                        return text.split("T")[0]
                    },
                },
                {
                    title: '离开时间',
                    dataIndex: 'endTime',
                    customRender: ({text}) => {
                        return text.split("T")[0]
                    },
                },
                {
                    title: '订单状态',
                    dataIndex: 'status',
                    customRender: ({text}) => {
                        return store.state.order.status.find(item => item.status == text).name;
                    },
                },
                {
                    title: '操作',
                    dataIndex: 'operation',
                    slots: { customRender: 'operation' },
                },
            ],
            data: [],
            page: 0,
            size: 6
        })
        onMounted(async () => {
            let token = localStorage.getItem("token");
            let res = await getInstance(token).get(`/order?page=${state.page}&size=${state.size}`);
            if(res.code === 0){
                state.data = res.data.content;
            }else{
                message.error("加载数据失败.")
            }
        })
        const selectOrder = async (key) => {
            state.active = key;
            let res;
            let token = localStorage.getItem("token")
            if(key === "all"){
                res = await getInstance(token).get(`/order?page=${state.page}&size=${state.size}`);
            }else{
                res = await getInstance(token).get(`/order/list/${key}?page=${state.page}&size=${state.size}`);
            }
            if(res.code == 0){
                state.data = res.data.content;
            }else{
                message.error("获取数据失败");
            }
        }
        const updateStatus = async (record, status) => {
            let token =localStorage.getItem("token");
            let res = await getInstance(token).put(`/order/${record.id}?status=${status}`);
            if(res.code === 0){
                let index = state.data.findIndex(item => item.id = record.id);
                state.data[index].status = status;
                message.success("更新状态成功")
            }else{
                message.error("更新状态失败.")
            }
        }
        return {
            state,
            selectOrder,
            updateStatus
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../assets/styles/pages/allOrder.scss";
</style>